<template>
  <div class="system-menu-container">
    <div class="breadcrumb-box">
      <Breadcrumb/>
    </div>

    <div class="page-main" v-loading="state.tableData.loading">
      <el-card class="order-card1" shadow="hover">
        <template #header> 今日外呼任务数据</template>
        <el-table :data="state.tableData.data" height="500" size="large">
          <el-table-column label="任务名称" prop="任务名称">
            <template #default="scope">

              <a @click="getDetail(scope.row['任务id'])" href="javascript:void(0)">{{ scope.row['任务名称'] }}</a>
            </template>
          </el-table-column>
          <el-table-column label="未拨打总数" prop="未拨打总数"/>
          <el-table-column label="今日拨打客户端" prop="拨打客户端"/>
          <el-table-column label="今日接通数" prop="接通数"/>
          <template #empty>
            <el-empty class="vab-data-empty" description="暂无数据"/>
          </template>
        </el-table>
      </el-card>
<!--      <el-card class="order-card1" shadow="hover">-->
<!--        <template #header> 数据统计</template>-->
<!--        <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">-->
<!--          <el-row class="order-card1-content" :gutter="30">-->
<!--            <el-col class="order-card1-col">-->
<!--              <p>接通率</p>-->
<!--              <h1 class="record_h">{{ (state.recordData['接通率'] * 100) }}%</h1>-->
<!--            </el-col>-->

<!--            <el-col class="order-card1-col">-->
<!--              <p>已拨打</p>-->
<!--              <h1 class="record_h">{{ state.recordData['已拨打'] }}</h1>-->
<!--            </el-col>-->

<!--            <el-col class="order-card1-col">-->
<!--              <p>已接通</p>-->
<!--              <h1 class="record_h">{{ state.recordData['正常接听'] }}</h1>-->
<!--            </el-col>-->

<!--            <el-col class="order-card1-col">-->
<!--              <p>通话时长</p>-->
<!--              <h1 class="record_h">{{ state.recordData['总外呼总时长'] }}</h1>-->
<!--            </el-col>-->

<!--            <el-col class="order-card1-col">-->
<!--              <p>平均时长</p>-->
<!--              <h1 class="record_h">{{ state.recordData['总外呼平均时长'] }}</h1>-->
<!--            </el-col>-->


<!--            <el-col class="order-card1-col">-->
<!--              <p>阳性指标</p>-->
<!--              <h1 class="record_h">{{ state.recordData['阳性指标'] }}</h1>-->
<!--            </el-col>-->

<!--          </el-row>-->
<!--        </el-col>-->
<!--      </el-card>-->

      <el-dialog
          v-if="state.detail"
          v-model="state.dialogFormVisible"
          title="详情"
          width="1200px"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          @close="close"
      >
        <el-card class="order-card1" shadow="hover">
          <template #header> 数据统计</template>
          <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
            <el-row class="order-card2-content">
              <el-col v-for="(i,k) in state.detail">
                <div v-if="k !=='意图统计' ">
                <p>{{ k }}</p>
                <h1 class="record_h" v-if="k=='接通率'">{{ i }}%</h1>
                  <h1 class="record_h" v-else>{{ i }}</h1>

                </div>
              </el-col>
              <!-- 其他 <el-col> -->
            </el-row>
          </el-col>
        </el-card>
        <el-card class="order-card1" shadow="hover">
          <template #header>
            <el-icon>
              <ele-Notebook/>
            </el-icon>
            意图统计
          </template>
          <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
            <el-row class="order-card1-content intent-row">
              <el-col v-for="(item, key) in  state.detail['意图统计']" :span="8">
                <el-card class="order-card1" shadow="hover">
                  <template #header>
                    <span style="color: #1890ff;overflow-wrap: break-word;word-break: break-word;display: inline-block;max-width: 100%;">{{ key }}   </span>
                  </template>
                  <el-descriptions class="margin-top" title="" :column="1" border>
                    <el-descriptions-item v-for="(it, sk) in state.detail['意图统计'][key]">
                      {{JSON.stringify(state.detail[key])}}
                      <template #label>
                        <div class="cell-item">

                          <span style="overflow-wrap: break-word;word-break: break-word;display: inline-block;max-width: 100%;">{{ sk }}</span>
                        </div>
                      </template>
                      {{ it }}%
                    </el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </el-card>
      </el-dialog>
    </div>
  </div>
</template>

<script setup name="intelligentOutbound-statistics-index">
import {storeToRefs} from 'pinia';
import {getToday} from "/@/utils/timeUtil";
import {useRoutesList} from '/@/stores/routesList';
import {ElMessage, ElMessageBox} from 'element-plus';
import {followApi} from '/@/api/record/follow';

// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));

// 定义变量内容
const stores = useRoutesList();
const router = useRouter();

const state = reactive({
  dialogFormVisible: false,
  tableData: {
    data: [],
    loading: true,
  },
  detail: {},
  recordData: {},

  name: 'test',
  intentions: {
    '伤口出血\/渗出': {
      其他: 100,
    },
    换药情况: {
      其他: 100,
    },
    有无发热: {
      其他: 100,
    },
    伤口疼痛情况: {
      其他: 100,
    },
    '引流管\/引流片': {
      其他: 100,
    },
    并发症情况: {
      其他: 100,
    },
    病理结果: {
      其他: 100,
    },
    复诊时间: {
      其他: 100,
    },
    '遵从服药\/活动': {
      其他: 100,
    },
    其他问题: {
      其他: 100,
    },
  },
});
const getTableData = () => {
  var date = getToday();
  const start_time = date;
  const end_time = date;

  const param = {
    start_time: start_time,
    end_time: end_time,
  }
  followApi().getFollowTableData(param).then((res) => {
    state.tableData.data = res.data['response']['外呼任务数据'];
    state.recordData = res.data['response'];
    state.tableData.loading = false;
  });
}
const getDetail = async (task_id) => {
  console.log(task_id)
  await followApi().getFollowDetail({task_id: task_id}).then(res => {
    state.detail = res.data['response'];
  })
  state.dialogFormVisible = true

  console.log(state.dialogFormVisible)
}

const testF = () => {
  console.log('.....1111');
};

const waitF = (row) => {
  console.log(row);
  return 'waitF';
};

const msgF = () => {
  ElMessage({type: 'warning', message: '请正确输入路径及完整参数（query、params）'});
};

const confirmB = () => {
  ElMessageBox.confirm(`此操作将永久删除, 是否继续?`, '提示', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning',
  })
      .then(() => {
        ElMessage.success('删除成功');

        //await setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
      })
      .catch(() => {
      });
};


// 页面加载时
onMounted(() => {
  getTableData();
});
</script>

<style scoped>
.el-card {
  margin-bottom: 30px;
}


.order-card1-content {
  min-height: 80px; /* 调整容器的最小高度 */
}

.record_h {
  font-size: 2.5rem;
  line-height: 1.5;
  margin: 0;
  white-space: nowrap;
  position: relative;
  top: 17px;
}

.order-card1-col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

@media screen and (max-width: 768px) {
  .record_h {
    font-size: 1rem;
    line-height: 1.2;
  }
}
.order-card2-content{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* 每行最多4个项目 */
  grid-gap: 30px; /* 设置网格间距 */
  min-height: 80px;
}
.intent-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
</style>
